/**
 * 扫描结果-依赖列表
 */

import React from 'react';
import { Collapse } from '@teamix/ui';
import Item from './listItem';
import intl from '../../locale';

const prefix = 'dependency-build-issue-list';
export default class DependencyList extends React.Component {
  renderItem = (data) => {
    const { issueFilter } = this.props;
    const showCollapse = !issueFilter || data.issue_count_info[issueFilter];
    const count = issueFilter ? data.issue_count_info[issueFilter] : data.issue_id_list.length;
    return (
      <Collapse.Panel
        style={{ display: showCollapse ? 'block' : 'none' }}
        title={
          <div>
            {data.title}
            <span className="issue-count">
              {intl.get(
                {
                  id: 'code-assets.components.dependencyBuildResultIssues.list.CountQuestions',
                  defaultMessage: '{count}个问题',
                },
                { count },
              )}
            </span>
            {/* <Badge count={data.issue_id_list.length} style={{ marginLeft: 10, background: '#bfbfbf' }} key={data.issue_id_list.join(',')} /> */}
          </div>
        }
      >
        <div className={prefix}>
          <Item detail={data} {...this.props} />
        </div>
      </Collapse.Panel>
    );
  };

  render() {
    const { issues } = this.props;
    return (
      <Collapse>
        {issues.map((item) => {
          return this.renderItem(item);
        })}
      </Collapse>
    );
  }
}
